/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div class="area-planContent" v-if="!!chooseId" style="">
  <div class="mask" v-if="maskVisible" @click ="clickMask"></div>
  <div style="border:0px solid red;display:flex;flex-direction:column;height:100%">
    <div style="border: 0px solid red;display:flex;flex-direction:column;height:50%">
      <div class="sub-title" style="height:10%;border:0px solid red;">{{$t('openatc.greenwaveoptimize.timespace')}}</div>
      <div class="sub-main" style="height:90%;border:0px solid red;">
        <PlanChart ref="planchart"/>
      </div>
    </div>
    <div style="border:0px solid red;display:flex;flex-direction:column;height:50%">
      <div class="sub-title" style="height:10%;border:0px solid red;">{{$t('openatc.greenwaveoptimize.pattern')}}</div>
      <div class="sub-main" style="height:90%;border:0px solid red;">
        <PatternTable :isShowOperation="isShowOperation" ref="patterntable" @onNewPatternListChange="onNewPatternListChange"/>
      </div>
    </div>
  </div>
  <Messagebox :visible="messageboxVisible" :text="$t('openatc.greenwaveoptimize.confirmdownloadpattern')" @cancle="cancle" @ok="ok"/>
</div>
</template>

<script>
import PatternTable from './pattern/patternTable.vue'
import PlanChart from './pattern/planChart/index.vue'
import Messagebox from '../../components/MessageBox/index.vue'
export default {
  name: 'AreaPlanContent',
  data () {
    return {
      isShowOperation: false,
      activeName: 'first',
      activeName2: 'second',
      maskVisible: false, // 引导遮罩层是否显示
      configurationVisible: false, // 配置界面是否显示
      messageboxVisible: false, // 关闭界面二期确认弹窗是否显示
      routeData: {}, // 单个协调路线的全部信息
      patternList: [],
      phaseList: [],
      greenwave: []
    }
  },
  components: {
    PatternTable,
    PlanChart,
    Messagebox
  },
  props: {
    schemeData: {
      type: Array
    },
    step: {
      type: Boolean
    },
    zIndexObj: {
      type: Object
    },
    chooseId: {
      type: Number
    }
  },
  watch: {
    schemeData: {
      handler: function (val) {
        if (val && !val.length && this.step) {
          this.maskVisible = true
          // 模拟一次手动点击，触发tip显示
          this.$refs.editbtn.click()
        }
      },
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    cancle () {
      this.messageboxVisible = false
    },
    ok () {
      this.messageboxVisible = false
    },
    Download () {
      this.messageboxVisible = true
    },
    handleClick (tab, event) {
      if (tab.name === 'first') {
        this.refreshChart()
      }
    },
    refreshChart () {
      let patterntable = this.$refs.patterntable
      let newPatternList = patterntable.newPatternList
      for (let pattern of this.patternList) {
        let agentid = pattern.agentid
        let newPattern = newPatternList.filter(npl => npl.agentid === agentid)[0]
        let patternId = newPattern.patternId
        let currPatternList = pattern.feature.patternList
        let currPattern
        if (Array.isArray(currPatternList)) {
          currPattern = currPatternList.filter(cpl => cpl.id === patternId)[0]
        } else {
          currPattern = currPatternList
        }
        currPattern.cycle = newPattern.cycle
        currPattern.offset = newPattern.offset
      }
      this.handlePlanChart()
    },
    closeDrawer (isRefresh) {
      this.configurationVisible = false
      if (isRefresh === 'refresh') {
        this.$emit('resetContentComponent')
      }
    },
    clickMask () {
      this.maskVisible = false
    },
    handlePatternTable () {
      let patterntable = this.$refs.patterntable
      patterntable.onPatternTable(this.routeData, this.patternList, this.phaseList)
    },
    onPlanChart (routeData, patternList, greenwave, phaseList) {
      let planchart = this.$refs.planchart
      planchart.onPlanChart(routeData, patternList, greenwave, phaseList)
      this.onPatternTable(routeData, patternList, greenwave, phaseList)
    },
    onPatternTable (routeData, patternList, greenwave, phaseList) {
      let patterntable = this.$refs.patterntable
      patterntable.onPatternTable(routeData.devs, patternList, phaseList)
    },
    handlePlanChart () {
      let planchart = this.$refs.planchart
      planchart.onPlanChart(this.routeData, this.patternList, this.greenwave)
    },
    handleMaskVisible () {
      // 数据为空，显示蒙层
      if (this.patternList && !this.patternList.length && this.step) {
        this.maskVisible = true
        // 模拟一次手动点击，触发tip显示
        this.$refs.editbtn.click()
      }
    },
    onNewPatternListChange (newPatternList) {
      this.refreshChart()
      // reset route

      // emit route
      this.$emit('onRouteChange', newPatternList)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
